<template>
	<view>
		<view class="fund-contain">
			<view class="fund-contain-amount">
				<view class="">
					¥{{ pending_for_withdraw_amount }}
				</view>
				<view class="">
					可提现
				</view>
			</view>
			<view class="fund-contain-title">
				可提现总额（元）
			</view>
		</view>
		<view class="deposit-fund first-style">
			<view class="deposit-fund-content">
				<view class="deposit-fund-content-details">
					<view class="">¥{{ total }}</view>
					<view class="" style="color: #999999;font-size: 12px;margin-top: 2px;text-align: center;-webkit-box-flex: 1;-webkit-flex-grow: 1;
    flex-grow: 1;">总金额(元)</view>
					<view class="">总额扣除{{rate * 100}}%手续费</view>
					
				</view>
				<view class="deposit-fund-line"></view>
				<view class="deposit-fund-content-details">
					<view class="">¥{{ pending_for_settlement_amount }}</view>
					<view class="" style="    color: #999999;
					font-size: 12px;
					margin-top: 2px;
					text-align: center;
					-webkit-box-flex: 1;
					-webkit-flex-grow: 1;
					flex-grow: 1;">待结算(元)</view>
					<view class="">今日收款金额过24点提现</view>
				</view>
			</view>
			<view class="deposit-binding" @click="gotoWithdraw">
				{{ isd == 1 ? '提现到微信' : '提现到绑定银行卡' }}
			</view>
			<view class="deposit-binding-tip">1-3个工作日到账（每天可提现3次）</view>
		</view>
		<view class="">
			<view class="group-state-title">
				<view class="">
					<view class="group-state-contain">
						<view :class="groupStatusIndex==index?'group-state-active':''" v-for="(item,index) in groupStatus" :key='index' data-index="index" @click="changeIndex(index)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="groupStatusIndex == 0">
				<view v-if="incomes.length>0">
					<view class="user-fund-content" v-for="(income,index) in incomes" :key="index">
						<view class="staff-name-img">
							<view class="staff-per-msg">
								<image :src="income.avatar" mode="aspectFill"></image>
								<view class="staff-name">{{ income.nickname }}</view>
							</view>
							<view class="staff-time">支付时间：<text>{{ income.date_added }}</text></view>
						</view>
						<view class="staff-phone">
							<view class="staff-phone-details">
								支付金额：¥{{ income.actual_amount }}
							</view>
							<!-- <view class="dial-phone withdraw" v-if="income.capital_status==1">
								待确认
							</view>
							<view class="dial-phone withdraw" v-else-if="income.capital_status==2">
								待结算
							</view>
							<view class="dial-phone withdraw" v-else="income.capital_status==3">
								可提现
							</view> -->
						</view>
						<view class="we-chat">
							微信手续费：-¥{{ (income.actual_amount*0.006).toFixed(2) }}
						</view>
						<view class="pay-status">
							<view class="">
								结算金额：¥{{ income.settlement_amount }}
							</view>
							<view class="pay-statu-ssucced">支付成功</view>
						</view>
					</view>
				</view>
				<view class="no-data"v-else>
					暂无数据
				</view>
			</view>
			<view class="expend-content" v-if="groupStatusIndex == 1 && isd == 2">
				<view v-if="withdraws.length>0">
					<view class="expend-details-content" v-for="(withdraw,index) in withdraws" :key="index">
						<view class="expend-details-time">{{ withdraw.date_added }}</view>
						<view class="expend-details-state">
							<view class="expend-state-hand" v-if="withdraw.status==0">
								提现中
							</view>
							<view class="expend-state-succed" v-else-if="withdraw.status==1">
								提现成功
							</view>
							<view class="expend-state-bad" v-else="withdraw.status==2">
								提现失败
							</view>
							<view class="">-¥{{ withdraw.withdraw_amount }}</view>
						</view>
					</view>
				</view>
				<view class="no-data"v-else>暂无数据</view>
			</view>
			<view class="expend-content" v-if="groupStatusIndex == 1 && isd == 1">
				<view v-if="withdraws.length>0">
					<view class="expend-details-content" v-for="(withdraw,index) in withdraws" :key="index">
						<view class="expend-details-time">{{ withdraw.time | formatDates }}</view>
						<view class="expend-details-state">
							<view class="expend-state-hand" v-if="withdraw.change_results=='提现中'">
								提现中
							</view>
							<view class="expend-state-succed" v-else-if="withdraw.change_results=='提现成功'">
								提现成功
							</view>
							<view class="expend-state-bad" v-else="withdraw.change_results=='提现失败'">
								提现失败
							</view>
							<view class="">-¥{{ withdraw.change_value }}</view>
						</view>
					</view>
				</view>
				<view class="no-data"v-else>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				groupStatus:['收益明细','支出明细'],
				groupStatusIndex:1,
				store_id:0,
				total:0.00,
				pending_for_settlement_amount:0.00,
				pending_for_withdraw_amount:0.00,
				withdraws:[],
				incomes:[],
				page:1,
				page_size:100000,
				type:'',
				isd:'',
				rate:0,
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			
			this.isd = parseInt(options.isd,10)
			console.log(this.isd,"++++++++++++++++++++++++++++++++++");
		},
		filters:{
			formatDates(value) {
				let date = new Date(value * 1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let mm = date.getMinutes();
				mm = mm < 10 ? ('0' + mm) : mm;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + '  ' + h + ':' + mm + ':' + s;
			}
		},
		onShow(){
			this.get_store_capital();
			if(this.groupStatusIndex == 0){
				
				this.page = 1
				this.page_size = 100000
				this.withdraws = []
				this.incomes =[]
				this.get_store_income();
				
			}else{
				
				this.page = 1
				this.page_size = 100000
				this.withdraws = []
				this.incomes =[]
				this.get_store_withdraw();
			}
			this.$api.update_withdraw({token:this.token}).then(res=>{
				console.log(res,'update_withdraw')
			})
		},
		methods:{
			get_store_capital(){
				const that = this
				let data = {
					token:that.token,
				}
				that.$api.get_store_capital(data).then(res => {
					console.log(res,'get_store_capital')
					if(res.status){
						console.log(that.isd,"+++++++++++++++++++++++++++++++++++++");
						if(that.isd == 1){
							that.total = res.data.wx.total
							that.pending_for_settlement_amount = res.data.wx.pending_for_settlement_amount
							that.pending_for_withdraw_amount = res.data.wx.pending_for_withdraw_amount
							that.rate = res.storeInfo.rate_wx
						}else{
							that.total = res.data.bank.total
							that.pending_for_settlement_amount = res.data.bank.pending_for_settlement_amount
							that.pending_for_withdraw_amount = res.data.bank.pending_for_withdraw_amount
							if( res.storeInfo.is_huifu_up == 1 ){
								that.rate = res.storeInfo.rate_up
							}else{
								that.rate = res.storeInfo.rate_down
							}
						}
						
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
						
					}
					
				}).catch(err => {
					
					uni.showToast({
						title:err,
						icon:"none",
						duration:2000
					})
					
					console.log(err,'that.$api.get_store_income')
				})
			},
			get_store_income(){
				const that = this
				let data = {
					token: that.token,
					payment_type: that.isd,
					page: that.page,
					page_size: that.page_size
				}
				that.$api.get_store_income(data).then(res => {
					// console.log(res,'get_store_income')
					if(res.status){
						
						that.incomes = res.list
						
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
						
					}
					
				}).catch(err => {
					console.log(err,'that.$api.get_store_income')
				})
			},
			get_store_withdraw(){
				
				const that = this
				let data = {
					token:that.token,
					payment_type: that.isd,
					page:that.page,
					page_size:that.page_size
				}
				console.log(data,'gainShopId data')
				that.$api.get_store_withdraw(data).then(res => {
					
					console.log('get_store_withdraw',res)
					if(res.status){
						that.type = res.payment_type
						if(res.list.length>0){
							that.withdraws = res.list
							console.log('get_store_withdraw',res.list)
						}
						
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
					}
					
				}).catch(err => {
					console.log(err,'this.$api.get_store_capital')
				})
			},
			changeIndex(index){
				
				this.groupStatusIndex = index
				if(this.groupStatusIndex == 0){
					
					this.page = 1
					this.page_size = 100000
					this.withdraws = []
					this.incomes =[]
					this.get_store_income();
					
				}else{
					this.page = 1
					this.page_size = 100000
					this.withdraws = []
					this.incomes =[]
					this.get_store_withdraw();
				}
				
			},
			gotoWithdraw(){
				uni.navigateTo({
					url:'/pages/memberCenter/fundManage/deposit/deposit?store_id=' + this.store_id + '&type=' + this.isd
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F3F3F4;
	}
	.fund-contain{
		width: 100%;
		height: 408upx;
		background: url(https://tool.tuanhaoke.cn/static/image/member/fund.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 46upx;
		box-sizing: border-box;
	}
	.fund-contain-amount{
		position: relative;
	}
	.fund-contain-amount>view:first-child{
		text-align: center;
		color: #FFFFFF;
		font-size: 60upx;
		margin-top: 14upx;
	}
	.fund-contain-amount>view:first-child>text{
		font-size: 40upx;
	}
	.fund-contain-amount>view:last-child{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FF8B46;
		font-size: 20upx;
		border-radius: 18upx 18upx 18upx 0;
		background: #FFFFFF;
		position: absolute;
		top: -16upx;right: 220upx;
	}
	.fund-contain-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
		margin-top: 6upx;
	}
	.deposit-fund{
		width: 100%;
		height: 376upx;
		background: #FFFFFF;
		padding: 30upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.first-style{
		border-radius: 24upx 24upx 0 0;
		margin-top: -162upx;
	}
	.deposit-fund-content{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.deposit-fund-content-details{
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child{
		color: #333333;
		font-size: 36upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-content-details>view:first-child>text{
		font-size: 28upx;
	}
	.deposit-fund-content-details>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 4upx;
		text-align: center;
		flex-grow: 1;
	}
	.deposit-fund-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 18upx;
	}
	.deposit-binding{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 50upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 18upx 0 rgba(255, 111, 95, 0.18);
	}
	.deposit-binding-tip{
		text-align: center;
		color: #333333;
		font-size: 24upx;
		margin-top: 30upx;
	}
	.group-state-title{
		width: 100%;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.group-state-title>view{
		padding: 18upx 0;
		box-sizing: border-box;
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
	}
	.group-state-contain{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.user-fund-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.staff-name-img{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.staff-per-msg{
		display: flex;
	}
	.staff-name-img>view>image{
		width: 80upx;
		height: 80upx;
	}
	.staff-name{
		color: #333;
		font-size: 28upx;
		line-height: 80upx;
		margin-left: 20upx;
		width:150upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.staff-time{
		color: #999;
		font-size: 24upx;
		line-height: 80upx;
	}
	.staff-time>text{
		color: #333333;
		font-size: 28upx;
	}
	.staff-phone{
		width: 100%;
		display: flex;
		padding-left: 100upx;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.staff-phone-details{
		color: #666666;
		font-size: 28upx;
		line-height: 40upx;
	}
	.dial-phone{
		width: 128upx;
		height: 44upx;
		line-height: 44upx;
		border-radius: 4upx;
		text-align: center;
		font-size: 24upx;
	}
	.withdraw{
		background: rgba(255, 139, 70, 0.17);
		color: #FF8B46;
	}
	.unwithdraw{
		background: rgba(255, 139, 70, 0.17);
		color: #FF391F;
	}
	.refund{
		background: #F2F2F2;
		color: #666666;
	}
	.we-chat{
		margin-left: 72upx;
		color: #666666;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.pay-status{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		font-size: 28upx;
	}
	.pay-status>view:first-child{
		color: #666666;
		margin-left: 100upx;
	}
	.pay-statu-ssucced{
		color: #33B888;
	}
	.pay-status-refund{
		color: #FF391F;
	}
	.expend-content{
		width: 100%;
		background: #FFFFFF;
		padding:  0 30upx;
		box-sizing: border-box;
	}
	.expend-details-content{
		width: 100%;
		padding: 34upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
		justify-content: space-between;
	}
	.expend-details-content:last-child{
		border: 0;
	}
	.expend-details-time{
		color: #333333;
		font-size: 28upx;
		margin-right: 86upx;
	}
	.expend-details-state{
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
	}
	.expend-details-state>view:last-child{
		color: #333333;
	}
	.expend-state-hand{
		color: #333333;
	}
	.expend-state-succed{
		color: #33B888;
	}
	.expend-state-bad{
		color: #FF391F;
	}
	.no-data{
		font-size: 28upx;
		color:#b1b1b1;
		width: 100%;
		background: #FFFFFF;
		height:200upx;
		line-height: 200upx;
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
	}
</style>
